<template>
  <div class="map-page">

    <div class="map-controls">
      <button @click="refreshData">刷新数据</button>
      <el-input v-model="searchKeyword" placeholder="搜索蜂农" style="width: 200px" @keyup.enter="searchBeekeeper" />
      <button @click="toggleAreaDisplay">显示/隐藏区域</button>
    </div>

    <div id="mapContainer" class="map-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
// 保留实际用到的API：蜂农基本信息、蜂农定位信息
import { listFarmer } from '@/api/farmer/farmer';
import { listFarmerlocation } from '@/api/farmer/farmerlocation';
import { listBeearea } from '@/api/farmer/beearea';
import { listBoundary } from '@/api/farmer/boundary';
import { ElMessage } from 'element-plus';

let map = null;
let areaOverlays = []; // 区域覆盖物集合
let beekeeperMarkers = new Map(); // 蜂农标记集合
const searchKeyword = ref('');
const showAreas = ref(true);
const refreshInterval = ref(null);

// 存储原始数据：蜂农基本信息列表、蜂农定位信息列表
const farmerList = ref([]); // 蜂农基本信息（含id、name、phone等）
const farmerLocationList = ref([]); // 蜂农定位信息（含farmer_id、longitude、latitude等）
const beeAreaList = ref([]); // 蜂场信息（含id、name、longitude、latitude等）
const areaBoundaryList = ref([]); // 蜂场边界信息（含id、name、longitude、latitude等）

// 初始化地图（逻辑不变）
const initMap = () => {
  loadBMapScript().then(() => {
    map = new BMap.Map("mapContainer");
    const point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 12);
    map.enableScrollWheelZoom(true);
    map.enableDragging();
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.GeolocationControl());
    map.addControl(new BMap.ScaleControl());

    // 初始化完成后加载数据
    loadAllData();
    // 启动实时刷新（30秒一次）
    startRealTimeRefresh();
  });
};

// 加载数据：关键修改——分别存储蜂农信息和定位信息
const loadAllData = async () => {
  try {
    // 并行请求：蜂农基本信息、蜂农定位信息（取消无用的getManagedAreas）
    const [farmerRes, locationRes, beeAreaRes, boundaryRes] = await Promise.all([
      listFarmer({ pageNum: 1, pageSize: 1000 }), // 蜂农基本信息（全量）
      listFarmerlocation({ pageNum: 1, pageSize: 1000 }), // 蜂农定位信息（全量）
      listBeearea({ pageNum: 1, pageSize: 1000 }), // 蜂场信息（全量）
      listBoundary({ pageNum: 1, pageSize: 1000 }), // 边界信息（全量）
    ]);

    // 存储原始数据（方便后续关联和搜索）
    farmerList.value = farmerRes.rows; // 蜂农基本信息列表
    farmerLocationList.value = locationRes.rows; // 蜂农定位信息列表
    beeAreaList.value = beeAreaRes.rows; // 对应 tb_bee_area_info
    areaBoundaryList.value = boundaryRes.rows; // 对应 tb_area_boundary


    // 核心：关联蜂农信息与定位信息，再绘制标记
    const associatedData = associateFarmerAndLocation();
    console.log('关联后的数据：', associatedData);
    // drawBeekeepers(associatedData);
    drawBeekeepers(associatedData.beekeepers);
    // 绘制区域
    drawAreas(associatedData.areas);

  } catch (error) {
    console.error('加载数据失败:', error);
  }
};

// 核心函数1：关联蜂农基本信息与定位信息
const associateFarmerAndLocation = () => {
  // / ---------- 步骤1：区域与边界关联 ---------- /
  const areaBoundaryMap = new Map(); // key: areaId, value: 该区域的所有边界点
  areaBoundaryList.value.forEach(boundary => {
    const areaId = boundary.areaId;
    if (!areaBoundaryMap.has(areaId)) {
      areaBoundaryMap.set(areaId, []);
    }
    areaBoundaryMap.get(areaId).push(boundary);
  });

  // 组装“区域 + 边界点”数据
  const areasWithBoundary = beeAreaList.value.map(area => ({
    ...area,
    boundary: areaBoundaryMap.get(area.id) || [] // 每个区域的边界点数组
  }));

  // ---------- 步骤2：蜂农与定位 + 区域关联 ----------
  const locationMap = new Map(); // key: farmerId, value: 最新定位
  farmerLocationList.value.forEach(loc => {
    const farmerId = loc.farmerId;
    const currentTime = new Date(loc.locationTime);
    const existingLoc = locationMap.get(farmerId);
    if (!existingLoc || currentTime > new Date(existingLoc.locationTime)) {
      locationMap.set(farmerId, loc);
    }
  });

  // 组装“蜂农 + 最新定位 + 所属区域”数据
  const beekeepers = farmerList.value.map(farmer => {
    const farmerId = farmer.id;
    const latestLoc = locationMap.get(farmerId);
    if (!latestLoc || farmer.status !== 1) return null;

    // 从定位中取区域ID，再关联区域名称
    const areaId = latestLoc.areaId;
    const area = beeAreaList.value.find(a => a.id === areaId) || {};

    return {
      // 蜂农表字段（驼峰）
      farmerId: farmer.id,
      farmerName: farmer.farmerName,
      farmerPhone: farmer.farmerPhone,
      farmerAddress: farmer.farmerAddress,
      farmerAvatar: farmer.farmerAvatar,
      status: farmer.status,

      // 定位表字段（驼峰）
      locationId: latestLoc.id,
      areaId: latestLoc.areaId,
      longitude: latestLoc.longitude,
      latitude: latestLoc.latitude,
      locationTime: latestLoc.locationTime,
      isInPlan: latestLoc.isInPlan,
      locationRemark: latestLoc.locationRemark,

      // 计算在线状态
      online: new Date() - new Date(latestLoc.locationTime) <= 30 * 60 * 1000 ? 1 : 0,
      lastUpdate: latestLoc.locationTime,

      // 区域表关联字段（驼峰）
      areaName: area.areaName || '未关联区域',
      areaCode: area.areaCode || '',
      province: area.province || ''
    };
  }).filter(bee => bee !== null); // 过滤无效数据

  return {
    beekeepers,
    areas: areasWithBoundary
  };
};

// 核心函数2：绘制蜂农标记（基于关联后的数据）
const drawBeekeepers = (beekeepers) => {
  // 清除现有标记（避免重复）
  beekeeperMarkers.forEach(marker => map.removeOverlay(marker));
  beekeeperMarkers.clear();

  // 遍历关联后的数据，创建标记
  beekeepers.forEach(bee => {
    // 关键：从关联数据中获取经纬度（来自定位信息）
    const longitude = bee.longitude;
    const latitude = bee.latitude;

    // 校验经纬度有效性（避免无效坐标导致标记异常）
    if (!longitude || !latitude || isNaN(longitude) || isNaN(latitude)) {
      console.warn(`蜂农${bee.name}（ID:${bee.id}）定位坐标无效，跳过绘制`);
      return;
    }

    // 新增打印：确认通过校验的蜂农
    // console.log(`开始绘制蜂农：${bee.farmerName}（ID:${bee.id}），坐标：${longitude},${latitude}`);

    // 创建百度地图坐标点
    const point = new BMap.Point(longitude, latitude);

    // 自定义图标：在线（绿色）/离线（红色），用不同图片区分
    const iconUrl = bee.farmerAvatar + '';

    const icon = new BMap.Icon(iconUrl, new BMap.Size(40, 40));
    icon.setImageSize(new BMap.Size(40, 40)); // 确保图片按 40x40 缩放，保持比例

    // 创建标记并添加到地图
    const marker = new BMap.Marker(point, { icon });
    marker.setZIndex(100); // 强制设置蜂农头像层级为100（较低值）
    map.addOverlay(marker);
    beekeeperMarkers.set(bee.id, marker); // 存储标记，方便后续更新/清除

    // 点击标记显示详情弹窗
    marker.addEventListener('click', () => {
      const infoContent = `
         <div style="
    width: 280px; 
    padding: 16px; 
    background: #fff; 
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  ">
    <!-- 头部：姓名 + 状态标签 -->
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
      <h3 style="
        margin: 0; 
        font-size: 18px; 
        font-weight: 600; 
        color: #1d2129;
      ">
        ${bee.farmerName}
      </h3>
      <span style="
        padding: 3px 8px; 
        border-radius: 12px; 
        font-size: 12px; 
        font-weight: 500;
        background: ${bee.online ? '#e6f7ef' : '#fff2f0'};
        color: ${bee.online ? '#00b42a' : '#f53f3f'};
      ">
        ${bee.online ? '在线' : '离线'}
      </span>
    </div>

    <!-- 主体：信息列表（带图标） -->
    <div style="display: flex; flex-direction: column; gap: 8px; color: #4e5969; font-size: 14px;">
      <!-- 联系电话 -->
      <div style="display: flex; align-items: center; gap: 6px;">
        <svg style="width: 16px; height: 16px; fill: #86909c;" viewBox="0 0 24 24">
          <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
        </svg>
        <span>联系电话：${bee.farmerPhone || '<span style="color:#86909c;">未填写</span>'}</span>
      </div>

      <!-- 所在区域 -->
      <div style="display: flex; align-items: center; gap: 6px;">
        <svg style="width: 16px; height: 16px; fill: #86909c;" viewBox="0 0 24 24">
          <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
        </svg>
        <span>所在区域：${bee.areaId ? bee.areaId : '<span style="color:#86909c;">未关联区域</span>'}</span>
      </div>

      <!-- 最后定位时间 -->
      <div style="display: flex; align-items: center; gap: 6px;">
        <svg style="width: 16px; height: 16px; fill: #86909c;" viewBox="0 0 24 24">
          <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
        </svg>
        <span>最后定位：${new Date(bee.lastUpdate).toLocaleString()}</span>
      </div>

      <!-- 是否在规划点 -->
      <div style="display: flex; align-items: center; gap: 6px;">
        <svg style="width: 16px; height: 16px; fill: #86909c;" viewBox="0 0 24 24">
          <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
        </svg>
        <span>规划点内：${bee.isInPlan === 1 ? '<span style="color:#00b42a;">是</span>' : '<span style="color:#86909c;">否</span>'}</span>
      </div>
    </div>

    <!-- 底部：分割线 + 备注（可选） -->
    ${bee.locationRemark ? `
      <div style="margin-top: 12px; padding-top: 10px; border-top: 1px dashed #f0f2f5; color: #4e5969; font-size: 13px;">
        <span style="color:#86909c;">备注：</span>${bee.locationRemark}
      </div>
    ` : ''}
  </div>
       `;
      // 打开信息弹窗（绑定到当前标记的坐标点）
      map.openInfoWindow(new BMap.InfoWindow(infoContent), point);
    });
  });
};

// 新增：计算区域中心点
const calculateAreaCenter = (points) => {
  if (!points || points.length < 2) return null;

  // 计算所有点的经纬度平均值作为中心点
  const total = points.reduce((acc, point) => {
    acc.lng += point.lng;
    acc.lat += point.lat;
    return acc;
  }, { lng: 0, lat: 0 });

  return new BMap.Point(total.lng / points.length, total.lat / points.length);
};

// 绘制区域
const drawAreas = (areas) => {
  // 清除现有覆盖物
  areaOverlays.forEach(overlay => map.removeOverlay(overlay));
  areaOverlays = [];
  if (!showAreas.value) return;


  areas.forEach(area => {
    // 提取边界点并转换为百度地图 Point
    const points = (area.boundary || []).map(b =>
      new BMap.Point(b.longitude, b.latitude)
    );
    if (points.length < 3) return; // 至少3个点才能构成多边形

    // 1. 创建原有多边形区域
    const polygon = new BMap.Polygon(points, {
      strokeColor: "red",
      fillColor: "red",
      fillOpacity: 0.3
    });
    map.addOverlay(polygon);
    areaOverlays.push(polygon);

    // 2. 计算区域中心点（用于放置固定大小灰色区域）
    const centerPoint = calculateAreaCenter(points);
    if (!centerPoint) return;

    // 3. 创建固定大小的灰色区域（使用Marker和自定义图标实现）
    // 创建SVG作为图标，实现固定大小的灰色正方形
    const svgContent = `
      <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <!-- 灰色圆形主体，半透明 -->
        <circle cx="20" cy="20" r="15" fill="#86909c" fill-opacity="0.7" />
        <!-- 中心白点，增强视觉效果 -->
        <circle cx="20" cy="20" r="3" fill="#ffffff" fill-opacity="0.8" />
      </svg>
    `;

    // 将SVG转为Base64编码
    const svgBase64 = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgContent)))}`;

    // 创建固定大小的图标
    const fixedAreaIcon = new BMap.Icon(svgBase64, new BMap.Size(40, 40));
    fixedAreaIcon.setImageSize(new BMap.Size(40, 40)); // 锁定尺寸，不随地图缩放变化

    console.log(area.areaName);

    // 创建标记并添加到地图
    const fixedAreaMarker = new BMap.Marker(centerPoint, { icon: fixedAreaIcon });
    fixedAreaMarker.setZIndex(200); // 强制设置灰色圆形层级为200（高于蜂农头像的100）
    map.addOverlay(fixedAreaMarker);
    areaOverlays.push(fixedAreaMarker);

   

    // 区域点击弹窗：显示区域信息
    const showAreaInfo = (point) => {
      const farmerCount = farmerLocationList.value
        .filter(loc => loc.areaId === area.id)
        .map(loc => loc.farmerId)
        .filter((id, idx, arr) => arr.indexOf(id) === idx).length;

      const info = `
        <div style="width: 240px; padding: 12px;">
          <h3 style="margin:0 0 8px;">${area.areaName}</h3>
          <p>编码：${area.areaCode}</p>
          <p>省份：${area.province}</p>
          <p>蜂农数：${farmerCount}人</p>
        </div>
      `;
      map.openInfoWindow(new BMap.InfoWindow(info), point);

      
    };

    // 为多边形和固定区域都添加点击事件
    polygon.addEventListener('click', () => showAreaInfo(points[0]));
    fixedAreaMarker.addEventListener('click', () => showAreaInfo(centerPoint));
  });
};

// 实时刷新机制（逻辑不变）
const startRealTimeRefresh = () => {
  if (refreshInterval.value) clearInterval(refreshInterval.value);
  // 每10秒重新加载数据并更新标记
  refreshInterval.value = setInterval(() => {
    loadAllData();
  }, 10000);
};

// 搜索蜂农：关键修改——基于关联数据搜索
const searchBeekeeper = () => {
  const keyword = searchKeyword.value.trim();
  if (!keyword) return;

  // 1. 先关联数据，从beekeepers数组中按关键词筛选
  const associatedData = associateFarmerAndLocation();
  // 错误原因：associatedData是对象，应从associatedData.beekeepers数组筛选
  const filteredData = associatedData.beekeepers.filter(bee =>
    bee.farmerName.includes(keyword) || // 按蜂农姓名搜索
    (bee.farmerPhone && bee.farmerPhone.includes(keyword)) // 按蜂农电话搜索
  );

  if (filteredData.length === 0) {
    ElMessage.warning(`未找到包含"${keyword}"的蜂农`);
    return;
  }

  // 2. 绘制筛选后的蜂农标记
  drawBeekeepers(filteredData);

  // 3. 定位到第一个搜索结果的位置
  const firstBee = filteredData[0];
  const targetPoint = new BMap.Point(firstBee.longitude, firstBee.latitude);
  map.centerAndZoom(targetPoint, 15);

  // 4. 可选：打开第一个结果的弹窗
  const infoContent = `
    <div style="
    width: 280px; 
    padding: 16px; 
    background: #fff; 
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  ">
    <!-- 头部：姓名 + 状态标签 -->
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
      <h3 style="
        margin: 0; 
        font-size: 18px; 
        font-weight: 600; 
        color: #1d2129;
      ">
        ${firstBee.farmerName}
      </h3>
      <span style="
        padding: 3px 8px; 
        border-radius: 12px; 
        font-size: 12px; 
        font-weight: 500;
        background: ${firstBee.online ? '#e6f7ef' : '#fff2f0'};
        color: ${firstBee.online ? '#00b42a' : '#f53f3f'};
      ">
        ${firstBee.online ? '在线' : '离线'}
      </span>
    </div>

    <!-- 主体：信息列表（带图标） -->
    <div style="display: flex; flex-direction: column; gap: 8px; color: #4e5969; font-size: 14px;">
      <!-- 联系电话 -->
      <div style="display: flex; align-items: center; gap: 6px;">
        <svg style="width: 16px; height: 16px; fill: #86909c;" viewBox="0 0 24 24">
          <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
        </svg>
        <span>联系电话：${firstBee.farmerPhone || '<span style="color:#86909c;">未填写</span>'}</span>
      </div>

      <!-- 所在区域 -->
      <div style="display: flex; align-items: center; gap: 6px;">
        <svg style="width: 16px; height: 16px; fill: #86909c;" viewBox="0 0 24 24">
          <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
        </svg>
        <span>所在区域：${firstBee.areaId ? firstBee.areaId : '<span style="color:#86909c;">未关联区域</span>'}</span>
      </div>

      <!-- 最后定位时间 -->
      <div style="display: flex; align-items: center; gap: 6px;">
        <svg style="width: 16px; height: 16px; fill: #86909c;" viewBox="0 0 24 24">
          <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
        </svg>
        <span>最后定位：${new Date(firstBee.lastUpdate).toLocaleString()}</span>
      </div>

      <!-- 是否在规划点 -->
      <div style="display: flex; align-items: center; gap: 6px;">
        <svg style="width: 16px; height: 16px; fill: #86909c;" viewBox="0 0 24 24">
          <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
        </svg>
        <span>规划点内：${firstBee.isInPlan === 1 ? '<span style="color:#00b42a;">是</span>' : '<span style="color:#86909c;">否</span>'}</span>
      </div>
    </div>

    ${firstBee.locationRemark ? `
      <div style="margin-top: 12px; padding-top: 10px; border-top: 1px dashed #f0f2f5; color: #4e5969; font-size: 13px;">
        <span style="color:#86909c;">备注：</span>${firstBee.locationRemark}
      </div>
    ` : ''}
  </div>
  `;
  map.openInfoWindow(new BMap.InfoWindow(infoContent), targetPoint);
};

// 修改切换区域显示的函数
const toggleAreaDisplay = () => {
  showAreas.value = !showAreas.value;
  // 状态变更后重新绘制区域（关键修复）
  const associatedData = associateFarmerAndLocation();
  // 重加载
  drawAreas(associatedData.areas);
};


// 手动刷新数据（逻辑不变）
const refreshData = () => {
  loadAllData();
  ElMessage.success('数据已刷新');
};

// 组件生命周期（逻辑不变）
onMounted(() => {
  initMap();
});

onUnmounted(() => {
  if (map) { // 确保map实例存在
    // 1. 清除所有覆盖物（标记、区域等）
    map.clearOverlays();
    // 3. 若没有自定义事件，可跳过单独移除，直接清空容器
    const container = document.getElementById('mapContainer');
    if (container) {
      container.innerHTML = ''; // 彻底清除地图DOM，避免残留事件
    }

    // 4. 最后释放实例引用
    map = null;
  }

  // 清除定时器（保持不变）
  if (refreshInterval.value) {
    clearInterval(refreshInterval.value);
    refreshInterval.value = null;
  }
});

// 百度地图加载逻辑（逻辑不变）
const loadBMapScript = () => {
  return new Promise((resolve, reject) => {
    if (window.BMap) {
      resolve(window.BMap);
      return;
    }
    const AK = "KMaw3R2d9yQzAT44NI7aDAviwUpCPkoM";
    const script = document.createElement('script');
    script.src = `https://api.map.baidu.com/api?v=3.0&ak=${AK}&callback=initBMap`;
    script.type = 'text/javascript';
    script.onerror = reject;
    document.head.appendChild(script);
    window.initBMap = () => resolve(window.BMap);
  });
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 84vh;
  border: 1px solid #ccc;
}

.map-controls {
  padding: 20px;
  display: flex;
  gap: 10px;
  /* 放在右边 */
  justify-content: flex-end;
  align-items: center;
  background: #f5f7fa;
  border-top: 1px solid #eee;
}

.map-controls button {
  padding: 8px 16px;
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.map-controls button:hover {
  background: #1976d2;
}

.map-controls .el-input {
  --el-input-bg-color: #fff;
  --el-input-border-color: #dcdfe6;
}
</style>